<template>
    <el-dialog
        class="ba-operate-dialog"
        :close-on-click-modal="false"
        :model-value="DialogVisible.feedbackDialog"
        @close="toggleForm"
        :width="isMobileDevice==false?'45%':'95%'"
        append-to-body
        style="z-index: 204"
    >
        <template #header>
            <div class="title" >
                提交反馈
            </div>
        </template>
        <el-scrollbar v-loading="form.loading" class="ba-table-form-scrollbar">
            <div class="ba-operate-form" :class="'ba-add-form'">
            <el-form
                v-if="!form.loading"
                ref="formRef"
                @submit.prevent=""
                @keyup.enter="onSubmit(formRef)"
                :model="form.items"
                :label-position="isMobileDevice==false?'left':'top'"
                :label-width="form.labelWidth + 'px'"
                :rules="rules"
            >
                <el-form-item label="图片" prop="images">
                    <Upload  v-model="form.items!.images" type="images" :attr="{
                        type: 'images',
                    }" prop="images" />
                </el-form-item>
                <el-form-item label="反馈意见" prop="textarea" >
                    <el-input type="textarea" v-model="form.items!.textarea" prop="textarea"  @keyup.enter.stop="" @keyup.ctrl.enter="onSubmit(formRef)" placeholder="请输入意见"></el-input>
                </el-form-item>
            </el-form>
        </div>
        </el-scrollbar>
        <template #footer>
            <div :style="'width: calc(100% - ' + form.labelWidth! / 1.8 + 'px)'">
                <el-button @click="toggleForm()">取消</el-button>
                <el-button v-blur :loading="form.submitLoading" @click="onSubmit(formRef)" type="primary">
                    提交
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>
<script setup lang="ts">

import {isMobile} from "~/utils/common";
import {reactive, ref,inject} from 'vue'
import type {FormItemRule} from "element-plus";
import {addFeedback} from '@/api/user/chatai'
import {buildValidatorData} from "@/utils/validate";
import type { Action } from 'element-plus'
import { ElMessageBox } from 'element-plus'
import Upload from "~/components/baInput/upload.vue";
const emit = defineEmits(['hiddleDialog'])
const toggleForm=()=>{
    DialogVisible.feedbackDialog=false
    form.loading =false
    form.items ={
        images:[],
        textarea:""
    }
}


const isMobileDevice = ref(isMobile())
const DialogVisible=reactive(inject('DialogVisible','false'));
const form:any=reactive({
    loading:false,
    labelWidth:120,
    items:{
        images:[],
        textarea:""
    }
})
const formRef:any=ref('formRef')
const rules: Partial<Record<string, FormItemRule[]>> = reactive({
    textarea: [
        buildValidatorData({ name: 'required', title: 'textarea','message':'请输入' }),
    ],
    images: [
        buildValidatorData({ name: 'required', title: 'images','message':'请选择' }),
    ],
})
const onSubmit=()=>{
    formRef.value?.validate((valid) => {
        if (!valid) return
        addFeedback(form.items).then(res=>{
            DialogVisible.feedbackDialog=false
            ElMessageBox.alert(res.msg?res.msg:'您的建议已收到', '提示', {
                // if you want to disable its autofocus
                // autofocus: false,
                confirmButtonText: '确定',
                callback: (action: Action) => {
                    toggleForm()
                },
            })
        })
    })
}
</script>
<style scoped lang="scss">
.ba-operate-dialog{
    z-index: 1998;
}
:deep(.el-upload-list__item-thumbnail){
    width: 50px;
    height: 50px;
}
:deep(.el-upload-list__item){
    width: 50px;
    height: 50px;
}
:deep(.el-upload--picture-card){
    width: 50px;
    height: 50px;
}
</style>
